<script setup lang="ts">
import { onMounted, ref, toRaw, watch } from "vue";
import Searchbox from "@/views/components/searchbox/Searchbox.vue";
import ExtraAttribute from "@/views/configs/deptProductConfig/component/extraAttribute.vue";
import DataReceivePolicy from "@/views/configs/deptProductConfig/component/dataReceivePolicy.vue";
import DataSavePolicy from "@/views/configs/deptProductConfig/component/dataSavePolicy.vue";
import { useLogic } from "@/views/system/user/logic/logic";
import { getProductListApi, getProductOptionsApi } from "@/api/products/product";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";

const {t} = useI18n();

defineOptions({ name: "dept-product-config" });

const selected = ref(0);

const {deptTreeList,getDeptTree}  = useLogic()
let productList = [];
const productOptions = ref([]);
onMounted(async () => {
  await getDeptTree()
  const productOptionsRes = await getProductListApi({
    pageSize:500,
    page:1,
    wheres:{
      openStatus:1,
    },
  })
  if(productOptionsRes.code == 0){
    productList = productOptionsRes.data.list ? productOptionsRes.data.list : [];
    productOptions.value = [
      ...productOptionsRes.data.list.map(option => ({
        val: option.id,
        label: option.name
      }))
    ];
  }
})



const listComponents = [
  {
    key: "DataReceivePolicy",
    title: "数据接收策略",
    component: DataReceivePolicy
  },
  {
    key: "DataSavePolicy",  // 添加新标签页
    title: "数据保存策略",
    component: DataSavePolicy
  },
];

const searchParams = ref(  {
  deptId: 0,
  productId: 0,
  productKey:"",
})
const searchFields = ref(  [
  { prop: "productId",
    name: t("products.devicePage.productId"),
    type: "select",
    clearable: false,
    isHidden: false,
    formOptions:productOptions
  },
  {
    prop: 'deptId',
    name:  t("products.devicePage.deptId"),
    type: 'cascader',
    cascaderOptions: deptTreeList,
    clearable: true,
    isHidden: false,
    ops: {
      valueField: 'id',
      labelField: 'name',
      emitPath: false,
      checkStrictly: true
    }
  },
])



function tabClick({ index }) {
  selected.value = index;
}

// 在handleSearch中更新名称
const handleSearch = (e:any) => {
  console.log(e)
  Object.keys(e).forEach(key => {
    searchParams.value[key] = e[key];
  });

  searchParams.value.productKey = productList.find(item => item.id === searchParams.value.productId)?.productKey || '';

}

const handleReset = (e:any) => {
  searchParams.value.deptId = 0;
  searchParams.value.productId = 0;
  searchParams.value.productKey = "";
}

const route = useRoute();

watch(() => route.query, (newVal) => {
  console.log(newVal)
  if(newVal){
    if (route.query.deptId && Number(route.query.deptId)>0) {
      searchParams.value.deptId = Number(route.query.deptId);
    }
    if (route.query.productId && Number(route.query.productId)>0) {
      searchParams.value.productId = Number(route.query.productId);
      searchParams.value.productKey = productList.find(item => item.id === route.query.productId)?.productKey || '';
    }
  }
}, { immediate: true ,deep:true});


</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <Searchbox
          :fields= searchFields
          :maxVisibleFields=3
          @change="handleSearch"
          @search="handleSearch"
          @reset="handleReset"
        />
      </div>
    </template>

    <el-tabs @tab-click="tabClick">
      <template v-for="(item, index) of listComponents" :key="item.key">
        <el-tab-pane :lazy="true">
          <template #label>
            <span
              v-tippy="{
                maxWidth: 'none',
                content: `${item.title}`
              }"
            >
              {{ item.title }}
            </span>
          </template>
          <keep-alive>
            <component
              :is="item.component"
              :key="item.key"
              v-show="selected == index"
              :searchForm="searchParams"
            />
          </keep-alive>
        </el-tab-pane>
      </template>
    </el-tabs>
  </el-card>
</template>

<style scoped lang="scss">

</style>






